import React, {Component} from "react";
import {
    View,
    TouchableOpacity,
    Alert,
    StyleSheet,
    Dimensions,
    Modal,
    Text,
    Image,
    SafeAreaView,
    FlatList
} from "react-native";
import UnuseCouponCell from "../../page/mine/coupon/UnuseCouponCell";
import CommonEmptyView from "../CommonEmptyView";
const {width, height} = Dimensions.get('window');

type Props = {
    data:Array,
    onPress:Function,
    callBack:Function,
    cancelPress:Function,
    closeModal:Function,
}

export default class UseCouponDialog extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
        };
    }


    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
    }

    closeModal() {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }

    renderDialog() {

        return (
            <SafeAreaView style={styles.modalStyle}>
                <View style={{flexDirection:'row', alignItems:'center', height:44,justifyContent:'center'}}>
                    <TouchableOpacity onPress={()=>{this.closeModal()}} style={{width:44,height:44,marginLeft:12,marginTop:12,marginTop:24}}>
                        <Image style={{width:10,height:10}} source={require('../../../res/img/dialog/icon_cancel.png')}/>
                    </TouchableOpacity>
                    <View style={{flex:1}}/>
                    <Text style={styles.text}>选择优惠券</Text>
                    <View style={{flex:1}}/>
                    <TouchableOpacity onPress={()=>{
                        this.setState({
                            isVisible: false
                        });
                        this.props.closeModal(false);
                        this.props.cancelPress()}} >
                        <Text style={{color:'#333333',fontSize:12,marginRight:12}}>不使用优惠券</Text>
                    </TouchableOpacity>
                </View>




                <FlatList
                    ListHeaderComponent={() => (
                        !this.props.data.length?
                            <CommonEmptyView height={(height - 500)} source={require('../../../res/img/coupon/youhuiquan.png')} tip={'暂无优惠券'}/>
                            : null)
                    }
                    style={{backgroundColor:'#F5F5F5'}}
                    renderItem={this.renderCell}
                    keyExtractor={this.keyExtractor}
                    data={this.props.data}>
                </FlatList>

            </SafeAreaView>
        )
    }

    keyExtractor = (item: Object, index: number) => {
        return item.id + ''
    }

    renderCell = (rowData: any) => {
        return (
            <UnuseCouponCell
                info={rowData.item}
                onPress={this.onCellSelected}
            />
        )
    }

    onCellSelected = (info: Object) => {
        // this.props.navigation.navigate('couponDetailScene', {info: info})
        this.props.callBack(info)
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }


    render() {

        return (
            <View style={{flex: 1}}>
                <Modal
                    transparent={true}
                    visible={this.state.isVisible}
                    animationType={'fade'}>
                    <TouchableOpacity style={styles.container}
                                      onPress={() => this.closeModal()}>
                        {this.renderDialog()}
                    </TouchableOpacity>
                </Modal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    modalStyle: {
        // position: "absolute",
        // top: height - 350,
        // left: 0,
        marginTop:height - 350,
        width: width,
        height: 350,
        backgroundColor: '#ffffff',
        borderRadius: 6,
    },
    text: {
        fontSize: 14,
        fontWeight: 'bold',
        color: 'black',
    },
    text2: {
        fontSize: 14,
        margin: 10,
    },
    text3: {
        fontSize: 14,
        margin: 10,
        fontWeight: 'bold',
    },
    pay: {
        height: 50,
        backgroundColor: '#DB3853',
        justifyContent: 'center',
    },
    payText: {
        color: 'white',
        textAlign: 'center',
        fontWeight: 'bold',
        fontSize: 13,
    },
    money: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    pay_view: {
        paddingLeft: 20,
        paddingRight: 20,
        marginBottom: 15,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
    },
    pay_title: {
        color: 'rgba(0,0,0,0.7)',
        fontSize: 13,
    },
    pay_small_title: {
        marginTop: 3,
        color: 'rgba(0,0,0,0.3)',
        fontSize: 10,
        fontWeight: 'bold',
    },
});